<template>
  <div>
    <div class="box">
      <h1>{{ datauser.username }}</h1>
      <div class="box_bottom">
        <div class="left">发表时间：{{ datauser.email }}</div>
        <div class="right">
          {{ datauser.id }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell">id：{{ datauser.id }}</li>
              <li class="mui-table-view-cell">
                role_id：{{ datauser.role_id }}
              </li>
              <li class="mui-table-view-cell">mobile：{{ datauser.email }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 发表评论 -->
    <comment :id="id"></comment>
  </div>
</template>

<script>
import comment from './comment_list.vue'
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      datauser: {},
      id: this.$route.params.id
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    // 根据id 查询用户的信息
    async getlist() {
      const { data: res } = await this.$http.get(`users/${this.id}`)
      // console.log(res)
      if (res.meta.status !== 200) {
        return Toast('加载失败')
      }
      this.datauser = res.data
    }
  },
  components: {
    comment
  }
}
</script>

<style lang="less" scoped>
.box {
  text-align: center;
  border-bottom: 1px solid skyblue;
  padding: 10px 5px;
  h1 {
    font-size: 18px;
    color: red;
    margin-bottom: 5px;
    margin-top: 0;
  }
  .box_bottom {
    display: flex;
    justify-content: space-between;
  }
  .box_bottom {
    font-size: 14px;
  }
}
</style>
